<template>
  <div class="weekend">
    <div class="title">周末去哪儿</div>
    <ul class="items">
      <li class="item" v-for="one in weekendList" :key="one.id">
        <div class="item-img">
          <img
            :src="one.imgUrl"
            alt
          />
        </div>
        <div class="item-text">
          <p class="item-title">{{one.title}}</p>
          <p class="item-info">{{one.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "weekend",
  data() {
      return {
         weekendList:[
             {
          id: "0001",
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/85/708da4ab8dba17.jpg_r_640x214_d3d8cfa5.jpg",
          title: "青岛必打卡",
          desc: "像项链上的珍珠串联起一段青岛之旅"
        }, {
          id: "0002",
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/d2/bde427ee954da9.jpg_r_640x214_ae0ab333.jpg",
          title: "青岛必打卡",
          desc: "像项链上的珍珠串联起一段青岛之旅"
        }, {
          id: "0003",
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/85/708da4ab8dba17.jpg_r_640x214_d3d8cfa5.jpg",
          title: "青岛必打卡",
          desc: "像项链上的珍珠串联起一段青岛之旅"
        }, 
         ] 
      }
  },
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/common/commonstyl/mixins.styl';

.weekend {
    margin-top :20px;
    line-height: 80px;
  .title {
    background-color: #eee;
    text-indent: 20px;
  }
    .item-img{
        width :100%;
        height :33.9vw;
        >img{
            width :100%;
            height :100%;
        }
    }
  .item-text {
    text-indent: 20px;
    line-height: 50px;
    .item-title {
      font-size: 30px;
    }
    .item-info{
        font-size :26px;
        color :#ccc;
    }
  }
}
</style>